<template>
  <a-config-provider
    :locale="localeObj"
    :getPopupContainer="getPopupContainer"
    :auto-insert-space-in-button="false"
  >
    <template #renderEmpty>
      <loading-state :outsidePosition="true" style="position: unset;" :echartShowStatus="3"></loading-state>
    </template>
    <div id="app">
      <router-view v-if="isRouterAlive"/>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import zhTW from 'ant-design-vue/lib/locale-provider/zh_TW'
import { mapActions, mapGetters } from 'vuex'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { Sortable } from 'sortablejs'

export default {
  components:{},
  data () {
    return {
      localeObj: zhCN,
      isRouterAlive: true
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  computed: {
    ...mapGetters(['token', 'locale'])
  },
  created () {
    if (this.token) {
      //   this.initDictType() // 获取字典列表
    }
  },
  mounted () {
    const vm = this
    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
    window.addEventListener('hashchange', () => {
      const currentPath = window.location.hash.slice(1)
      if (vm.$route.path !== currentPath) {
        vm.$router.push(currentPath)
      }
    }, false)
    // 初始国际化
    this.localeChage(this.locale)
    // 初始化浏览器title
    window.document.title = this.$i18n.t('htmlTitle')
  },
  methods: {
    ...mapActions(['initDictType']),
    moment,
    // 国际化匹配
    localeChage (localeValue) {
      if (localeValue === 'zhTW') {
        this.localeObj = zhTW // ant-desigin组件变化
        moment.locale('zh-cn') // 时间格式变化
        this.$i18n.locale = 'zhTW' // 页面变化
      } else if (localeValue === 'en') {
        this.localeObj = null
        moment.locale('en')
        this.$i18n.locale = 'en'
      } else {
        this.localeObj = zhCN
        moment.locale('zh-cn')
        this.$i18n.locale = 'zhCN'
      }
    },
    // 弹出框渲染到父节点
    getPopupContainer (triggerNode) {
      if (triggerNode) {
        return triggerNode.parentNode
      }
      return document.body
    },
    // 重新加载主页面
    reload () {
      // this.isRouterAlive = false
      this.$store.dispatch('removeAllDictCode')
      this.$nextTick(function () {
        // this.isRouterAlive = true
        this.$router.go(0)
      })
    }
  },
  watch: {
    // 监听国际化变化
    locale (value) {
      this.localeChage(value)
      window.document.title = this.$i18n.t('htmlTitle')
    }
  }
}
</script>
<style>
#app {
  height: 100%;
  white-space: pre-wrap !important; /*保留空格且正常换行 */
  word-break: break-all;
}
/* 伪类不能保留空格 否则火狐显示异常 */
*::before {
  white-space: normal !important;
}
*::after {
  white-space: normal !important;
}
.el-table__empty-text{
  line-height: 100% !important;
}
</style>
